<template>
    <!-- 大盒子 -->
  <div class="wrap">
    <div>
      <!-- 头部 -->
      <header>
        <div class="img_jw">
          <img src="../assets/logo.png" alt />
          <span>电商后台管理系统</span>
        </div>
        <el-button class="btn" @click="tuichu" type="info">退出</el-button>
      </header>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 左侧导航 -->
        <div class="nav">
          <el-row class="navs">
            <el-col :span="12" style="width:200px;">
              <el-menu
                :collapse="isCollapse"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                router
                active-text-color="#ffd04b"
                v-model="menus"
              >
                <div class="close" @click="isCollapse =!isCollapse">|||</div>
                <el-submenu index="1" :index="item.id+''" v-for="item in menus" :key="item.id">
                  <template slot="title">
                    <i :class="iconsObj[item.id]"></i>
                    <span>{{item.authName}}</span>
                  </template>
                  <el-menu-item
                    v-for="item2 in item.children"
                    :key="item2.id"
                    :index="'/'+item2.path"
                  >
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item2.authName}}</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <!-- 右侧内容 -->
        <div class="contentRight">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../components/API/Api";
export default {
  name: "",
  data() {
    return {
      isCollapse: false,
      list: [],
      menus: {},
      // 图标区域
      iconsObj: {
        "125": "iconfont icon-user",
        "103": "iconfont icon-tijikongjian",
        "101": "iconfont icon-shangpin",
        "102": "iconfont icon-danju",
        "145": "iconfont icon-baobiao"
      },
      iconsLcon: {
        110: "el-icon-s-check",
        111: "el-icon-user",
        112: "el-icon-setting",
        104: "el-icon-s-grid",
        115: "el-icon-document-copy",
        121: "el-icon-s-data",
        107: "el-icon-edit-outline",
        146: "el-icon-office-building"
      }
    };
  },
  mounted() {
    this.navAdd();
  },
  methods: {
    // 退出功能
    tuichu() {
      this.$store.commit("tuichu");
      this.$message.success("退出成功");
      this.$router.push("/login");
    },
    // 获取导航数据
    navAdd() {
      API.navAdd().then(res => {
        // console.log(res);
        this.menus = res.data;
      });
    }
  },
  computed: {},
  components: {},
  watch: {},
  getters: {}
};
</script>

<style scoped>

* {
  margin: 0px;
  padding: 0px;
}
.wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgb(243, 235, 235);
  overflow: hidden;
}
header {
  width: 100%;
  height: 60px;
  background: rgba(2, 11, 92, 0.596);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header img {
  height: 40px;
}
.img_jw span {
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
  margin-left: 30px;
}
header .btn {
  margin-right: 30px;
}
.img_jw {
  display: flex;
  align-items: center;
}
.close {
  background: rgba(6, 6, 41, 0.938);
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
}
.content {
  width: 100%;
  height: 900px;
  display: flex;
  overflow:auto;
}
.contentRight {
  width: 100%;
}
</style>